import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import ClaimListShower from './ClaimListShower'
import { TextLine, TextCell } from '@components/ApprovePre/Approve'

// 格式化钱
function formatMoney (num = 0) {
  return String(num || 0).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' 元'
}

// 根据key获取标题
function getTitleByKey (keyTitleMap, preKey, key) {
  return keyTitleMap[`${preKey}_${key}`]
}

// 获取值
function getValueByKey (action, preKey, key, nullValue = '无') {
  const { varsMap } = action
  return (varsMap[`${preKey}_${key}`] || {}).value || nullValue
}

// 渲染退费
function renderRefundFee (claim) {
  return (
    <>
      <TextLine>
        <TextCell style={{ width: '100%' }}>
          <span>补/退受理费：</span>
          <span>新受理费 {formatMoney(claim.fee_acceptance)}</span>
          <span> - </span>
          <span>原受理费 {formatMoney(claim.fee_acceptance - claim.fee_acceptance_amend)}</span>
          <span> = </span>
          <span>{formatMoney(claim.fee_acceptance_amend)}</span>
        </TextCell>
      </TextLine>
      <TextLine>
        <TextCell style={{ width: '100%' }}>
          <span>补/退处理费：</span>
          <span>新处理费 {formatMoney(claim.fee_processing)}</span>
          <span> - </span>
          <span>原处理费 {formatMoney(claim.fee_processing - claim.fee_processing_amend)}</span>
          <span> = </span>
          <span>{formatMoney(claim.fee_processing_amend)}</span>
        </TextCell>
      </TextLine>
      <TextLine>
        <TextCell style={{ width: '100%' }}>
          <span>补/退仲裁费：</span>
          <span>{formatMoney(claim.fee_acceptance_amend + claim.fee_processing_amend)}</span>
        </TextCell>
      </TextLine>
    </>
  )
}

// 渲染收费
function renderFee (claim) {
  return (
    <TextLine>
      <TextCell style={{ width: '100%' }}>
        <span>仲裁费：</span>
        <span>受理费 {formatMoney(claim.fee_acceptance)}</span>
        <span> + </span>
        <span>处理费 {formatMoney(claim.fee_processing)}</span>
        <span> = </span>
        <span>{formatMoney(claim.fee)}</span>
      </TextCell>
    </TextLine>
  )
}

// 格式化claim中的项为数字
function formatClaimItemsToNumber (claim) {
  const keys = ['fee_acceptance', 'fee_processing', 'dispute_amount']
  claim.items.map(li => {
    keys.forEach(k => {
      if (li[k]) {
        li[k] = Number(li[k])
      }
    })
  })
  claim.fee_acceptance = Number(claim.fee_acceptance)
  claim.fee_acceptance_amend = Number(claim.fee_acceptance_amend)
  claim.fee_processing = Number(claim.fee_processing)
  claim.fee_processing_amend = Number(claim.fee_processing_amend)
  claim.dispute_amount = Number(claim.dispute_amount)
  return claim
}

function Main ({ action, keyTitleMap, preKey, children, isRefund }) {
  const [claim, setClaim] = useState({})
  const [log, setLog] = useState('')
  useEffect(() => {
    const c = getValueByKey(action, preKey, 'claimwithfee')
    setLog(getValueByKey(action, preKey, 'log'))
    try {
      const claim = JSON.parse(c)
      setClaim(formatClaimItemsToNumber(claim))
    } catch (e) {
      // console.warn(e)
    }
  }, [action, keyTitleMap, preKey])
  return (
    <div>
      {/* <TextLine>
        <TextCell>收费方式：{claim.fee_type || '无'}</TextCell>
        <Split />
        {children}
      </TextLine> */}
      <TextLine>
        <TextCell style={{ width: '65%' }}>
          <ClaimListShower title={getTitleByKey(keyTitleMap, preKey, 'claimwithfee')} data={getValueByKey(action, preKey, 'claimwithfee')} />
        </TextCell>
      </TextLine>
      {isRefund ? renderRefundFee(claim) : renderFee(claim)}
      {log ? (
        <TextLine>
          <TextCell style={{ width: '65%' }}>
            <span>{getTitleByKey(keyTitleMap, preKey, 'log')}:</span>
            <span>{log}</span>
          </TextCell>
        </TextLine>
      ) : null}
    </div>
  )
}

Main.propTypes = {
  action: PropTypes.object,
  keyTitleMap: PropTypes.object,
  preKey: PropTypes.string,
  isRefund: PropTypes.bool
}

Main.defaultProps = {
  action: {},
  keyTitleMap: {},
  preKey: '',
  isRefund: false
}

export default Main
